<!DOCTYPE html>
<html lang="en">
	{% load static%}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查看视频</title>
 <link rel="stylesheet" href="/media/css/bootstrap-off-canvas-nav.css">
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
 <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 <script src="/static/js/bootstrap-off-canvas-nav.js"></script>
 <link href="/media/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 <script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js"></script>
 <script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
  <link rel="stylesheet" href="/media/video/style1.css">
  <link rel="stylesheet" href="/media/video/style.css">
   <link rel="stylesheet" href="/media/video/style2.css">
<link rel="stylesheet" href="/media/back/back.css">


      <style>
          .font-type {
              color: white;
          }

          .position1 {
              position: relative;
              float: left;
              width: 20%;
              height: 50px;
              text-align: center;
              line-height: 50px;
          }

          @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

          body {
              position: relative;
              overflow-x: hidden;
          }

          body,
          html {
              height: 100%;
              background-color: white;
          }

          .nav .open>a {
              background-color: transparent;
          }

          .nav .open>a:hover {
              background-color: transparent;
          }

          .nav .open>a:focus {
              background-color: transparent;
          }

          /*-------------------------------*/
          /*           Wrappers            */
          /*-------------------------------*/
          #wrapper {
              height: 0px;
              -moz-transition: all 0.5s ease;
              -o-transition: all 0.5s ease;
              -webkit-transition: all 0.5s ease;
              padding-left: 0;
              transition: all 0.5s ease;
          }

          #wrapper.toggled {
              padding-left: 220px;
          }

          #wrapper.toggled #sidebar-wrapper {
              width: 220px;
          }

          #wrapper.toggled #page-content-wrapper {
              margin-right: -220px;
              position: absolute;
          }

          #sidebar-wrapper {
              -moz-transition: all 0.5s ease;
              -o-transition: all 0.5s ease;
              -webkit-transition: all 0.5s ease;
              background: #1a1a1a;
              height: 100%;
              left: 220px;
              margin-left: -220px;
              overflow-x: hidden;
              overflow-y: auto;
              transition: all 0.5s ease;
              width: 0;
              z-index: 1000;
          }

          #sidebar-wrapper::-webkit-scrollbar {
              display: none;
          }

          #page-content-wrapper {
              padding-top: 70px;
              width: 100%;
          }


          /*-------------------------------*/
          /*       Hamburger-Cross         */
          /*-------------------------------*/
          .hamburger {
              background: black;
              border: none;
              display: block;
              height: 32px;
              margin-left: 15px;
              position: fixed;
              top: 20px;
              width: 32px;
              z-index: 999;
          }

          .hamburger:hover {
              outline: none;
          }

          .hamburger:focus {
              outline: none;
          }

          .hamburger:active {
              outline: none;
          }

          .hamburger.is-closed:before {
              -webkit-transform: translate3d(0, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              color: #ffffff;
              content: '';
              display: block;
              font-size: 14px;
              line-height: 32px;
              opacity: 0;
              text-align: center;
              width: 100px;
          }

          .hamburger.is-closed:hover before {
              -webkit-transform: translate3d(-100px, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              display: block;
              opacity: 1;
          }

          .hamburger.is-closed:hover .hamb-top {
              -webkit-transition: all 0.35s ease-in-out;
              top: 0;
          }

          .hamburger.is-closed:hover .hamb-bottom {
              -webkit-transition: all 0.35s ease-in-out;
              bottom: 0;
          }

          .hamburger.is-closed .hamb-top {
              -webkit-transition: all 0.35s ease-in-out;
              background-color: rgba(255, 255, 255, 0.7);
              top: 5px;
          }

          .hamburger.is-closed .hamb-middle {
              background-color: rgba(255, 255, 255, 0.7);
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-closed .hamb-bottom {
              -webkit-transition: all 0.35s ease-in-out;
              background-color: rgba(255, 255, 255, 0.7);
              bottom: 5px;
          }

          .hamburger.is-closed .hamb-top,
          .hamburger.is-closed .hamb-middle,
          .hamburger.is-closed .hamb-bottom,
          .hamburger.is-open .hamb-top,
          .hamburger.is-open .hamb-middle,
          .hamburger.is-open .hamb-bottom {
              height: 4px;
              left: 0;
              position: absolute;
              width: 100%;
          }

          .hamburger.is-open .hamb-top {
              -webkit-transform: rotate(45deg);
              -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
              background-color: #ffffff;
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-open .hamb-middle {
              background-color: #ffffff;
              display: none;
          }

          .hamburger.is-open .hamb-bottom {
              -webkit-transform: rotate(-45deg);
              -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
              background-color: #ffffff;
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-open:before {
              -webkit-transform: translate3d(0, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              color: #ffffff;
              content: '';
              display: block;
              font-size: 14px;
              line-height: 32px;
              opacity: 0;
              text-align: center;
              width: 100px;
          }

          .hamburger.is-open:hover before {
              -webkit-transform: translate3d(-100px, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              display: block;
              opacity: 1;
          }

          /*-------------------------------*/
          /*          Dark Overlay         */
          /*-------------------------------*/
          .overlay {
              position: fixed;
              display: none;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.4);
              z-index: 1;
          }

          .top_div {
              background-color: rgba(0, 0, 0, 1);
              padding-top: 10px;
          }



          .dropdown-menu li {
              padding-left: 30px;
          }



          .dark-matter {

              /* margin-left: auto; */

              /* margin-right: auto; */

              /* max-width: 500px; */

              background: #555;

              /* padding: 20px 30px 20px 30px; */

              font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

              color: #D3D3D3;

              text-shadow: 1px 1px 1px #444;

              /* border: none; */
              /* border-radius: 5px; */

              /* -webkit-border-radius: 5px; */

              /* -moz-border-radius: 5px; */

          }

          .dark-matter form {
              width: 100%;
          }

          .dark-matter h1 {

              padding: 0px 0px 10px 40px;

              display: block;

              border-bottom: 1px solid #444;

              margin: -10px -30px 30px -30px;

          }

          .dark-matter h1>span {

              display: block;

              font-size: 11px;

          }

          .dark-matter label {

              display: block;

              margin: 0px 0px 5px;

          }

          .dark-matter label>span {

              float: left;

              width: 20%;

              text-align: right;

              padding-right: 10px;

              margin-top: 10px;

              font-weight: bold;

          }

          .dark-matter input[type="text"],
          .dark-matter input[type="email"],
          .dark-matter textarea,
          .dark-matter select {

              border: none;

              color: #525252;

              height: 25px;

              line-height: 15px;

              margin-bottom: 16px;

              margin-right: 6px;

              margin-top: 2px;

              outline: 0 none;

              padding: 5px 0px 5px 5px;

              width: 70%;

              border-radius: 2px;

              -webkit-border-radius: 2px;

              -moz-border-radius: 2px;

              -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

              background: #DFDFDF;

          }

          .dark-matter select {

              background: #DFDFDF url('/media/images/down2.png') no-repeat right;
              appearance: none;
              -webkit-appearance: none;

              -moz-appearance: none;

              text-indent: 0.01px;

              text-overflow: '';

              width: 70%;

              height: 35px;

              color: #525252;

              line-height: 25px;

          }

          .dark-matter textarea {

              height: 100px;

              padding: 5px 0px 0px 5px;

              width: 70%;

          }

          .dark-matter .button {
              margin: 10px 100px;
              background: #FFCC02;

              border: none;

              padding: 10px 70px 10px 70px;

              color: #585858;

              border-radius: 4px;

              -moz-border-radius: 4px;

              -webkit-border-radius: 4px;

              text-shadow: 1px 1px 1px #FFE477;

              font-weight: bold;

              box-shadow: 1px 1px 1px #3D3D3D;

              -webkit-box-shadow: 1px 1px 1px #3D3D3D;

              -moz-box-shadow: 1px 1px 1px #3D3D3D;

          }

          .dark-matter .button:hover {
              color: #333;
              background-color: #EBEBEB;
          }



          .vedioDiv{
              position: absolute;
              top: 40px;
              left: 250px;
              width: 1000px;
              height: 600px;
              background-color: rgba(0, 0, 0,.3);
              overflow:auto;
          }


          .vedioDiv::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 10px;
              /*高宽分别对应横竖滚动条的尺寸*/
              height: 1px;
          }

          .vedioDiv::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
              background: #535353;
          }

          .vedioDiv::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              /* background: #EDEDED; */
              background: rgba(0, 0, 0, 0.05);
          }
          .vedioDiv th{
              color:#43b9d5;
          }
          .vedioDiv tbody{
              color:#fff;
          }
      </style>
   <style>
        .container {
           width: 1300px;
           height: 800px;
           margin: auto;
         /*  border: 1px solid blue; */
           padding: 20px;
           box-sizing: border-box;
         /*  outline: 1px solid darkblue; */
           position: relative;
           top: 0px;
           left: 50px;
           font-family: Arial, sans-serif;
           overflow: auto;
       }

       .table-wrapper {
           max-height: 100%;
           overflow: hidden;
       }

       .table {
           width: 100%;
           border-collapse: collapse;
           margin-top: 20px;
           table-layout: fixed;
       }

       .table th,
       .table td {
           padding: 15px;
           text-align: left;
           border: 1px solid #ccc;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .table th {
           background-color: #ffa117;
           color: #fff;
           font-weight: bold;
       }

       .table tr:nth-child(even),
       .table tr:nth-child(odd) {
           background-color: white;
       }

       .table tr:hover {
           background-color: black;
           color: #fff;
       }

       .table td:empty::before {
           content: "N/A";
           color: #999;
           font-style: italic;
       }

       .table td:empty:hover::before {
           color: #e67e22;
       }
   </style>

</head>
<body >


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header dark-matter">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新人信息录入</h4>
                <span>录入照片</span>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form enctype="multipart/form-data" action="{% url 'trustedStaffForm' %}" method="post"
                      class="dark-matter" id="trustForm">
                    {%csrf_token %}
                    <label>
                        <span>姓名 :</span>
                        <input id="name" type="text" name="name" placeholder="姓名"/>

                    </label>

                    <label>

                        <span>年龄:</span>

                        <input id="age" type="text" name="age" placeholder="年龄"/>

                    </label>

                    <label>
                        <span>性别:</span>
                        <select name="selection">
                            <option value="man">男</option>
                            <option value="woman">女</option>
                        </select>
                    </label>
                    <label>
                        <span>邮箱 :</span>
                        <input id="email" type="email" name="email" placeholder="有效的邮箱地址"/>
                    </label>

                    <label>
                        <span>人脸照片 :</span>
                        <img id="image-preview" width="200" height="200">
                        <input style="margin-left:170px;" type="file" id="file" name="upload_image"
                               accept="image/gif, image/jpeg, image/png, image/jpg">
                    </label>

                </form>
            </div>
            <div class="modal-footer" style="background-color: #555555;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="mySubmit('trustForm')">提交</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="videoModalLabel">视频显示</h4>
            </div>
            <div class="modal-body">
                <video width="800" height="400" controls="controls" id="videos">
<!--                  <source src="" type="video/mp4" id="videoSrc">-->
                </video>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
  <div class="menuToggle"></div>
  <div class="sidebar">
    <ul>
      <li class="logo" style="--bg: #333;">
        <a href="">
          <div class="icon"><img style="width: 80px;" src="../media/back/gas.png" alt="Gas Station Icon"></div>
          <div class="text">智慧加油站</div>
        </a>
      </li>
      <div class="menu-list">
     <!--   <li style="--bg:#f44336;" class="active">
          <a href="#">
            <div class="icon"><ion-icon name="home-outline"></ion-icon></div>
            <div class="text">首页</div>
          </a>
        </li> -->
              <!-- <li><a href="{% url 'gly-rt-monitor' %}">实时监控</a> </li>
                        <li><a href="{% url 'record' %}"> 查看入侵记录 </a></li>
                          <li><a href="{%url 'vedioPage' %}"> 查看视频 </a></li>
                        <li> <a href="{% url 'statistic' %}"> 入侵统计</a></li> -->
        <li style="--bg:darkblue;">
         <a href="{% url 'gly-rt-monitor' %}">
            <div class="icon"><ion-icon name="eye-outline"></ion-icon></div>
            <div class="text">实时监控</div>
          </a>
        </li>

        <li style="--bg:springgreen;">
         <a href="{% url 'record' %}">
            <div class="icon"><ion-icon name="warning-outline"></ion-icon></div>
            <div class="text">查看入侵</div>
          </a>
        </li>

        <li style="--bg:#ffa117;" class="active">
          <a href="{%url 'vedioPage' %}">
            <div class="icon"><ion-icon name="videocam-outline"></ion-icon></div>
            <div class="text">查看视频</div>
          </a>
        </li>

        <li style="--bg:#292c39;">
         <a href="{% url 'statistic' %}">
            <div class="icon"><ion-icon name="analytics-outline"></ion-icon></div>
            <div class="text">入侵统计</div>
          </a>
        </li>

<!--        <li style="&#45;&#45;bg:purple;">-->
<!--        <a href="#" data-toggle="modal" data-target="#myModal">-->
<!--            <div class="icon"><ion-icon name="person-outline"></ion-icon></div>-->
<!--            <div class="text">行人信息导入</div>-->
<!--          </a>-->
<!--        </li>-->
          {% if status > 0 %}
		<li style="--bg:#ffa117;">
		  <a href="{% url 'infoManager' %}">
		    <div class="icon"><ion-icon name="document-outline"></ion-icon></div>
		    <div class="text">信息管理</div>
		  </a>
		</li>
           {% endif %}
		<li style="--bg:#333;">
		  <a href="{% url 'setMonitorPage' %}">
		    <div class="icon"><ion-icon name="settings-outline"></ion-icon></div>
		    <div class="text">监控区域设置</div>
		  </a>
		</li>
      </div>
	  <div class="bottom">
	    <li style="--bg:#333;">
	      <a href="#">
	        <div class="icon">
	          <div class="imgBx">
	            <img src="../media/video/images/user.jpg" alt="user">
	          </div>
	        </div>
	        <div class="text">manager</div>
	      </a>
	    </li>

	    <li style="--bg:#333;">
	     <a href="{% url 'login'%}">
	        <div class="icon"><ion-icon name="log-out-outline"></ion-icon></div>
	        <div class="text">退出</div>
	      </a>
	    </li>

	  </div>
    </ul>

  </div>



  <!-- 表格 -->
   <div class="container">
   <table class="table">
   <thead>
   <tr>
   <th>序号</th>
   <th>视频号</th>
   <th>拍摄起始时间</th>
   <th>详情</th>
   </tr>
   </thead>
   <tbody id="vedioTableBody">

   {% for rec in records %}
   <tr>
   <td>{{ forloop.counter }}</td>
   <td>{{ rec.videoName }}</td>
   <td>{{ rec.startTime }}</td>
   <td></td>
   </tr>

   {% endfor %}
   </tbody>
   </table>
   </div>





  <script src="js/script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script>
    const menuToggle = document.querySelector('.menuToggle'),
          sidebar = document.querySelector('.sidebar'),
          Menulist = document.querySelectorAll('.menu-list li')
    menuToggle.onclick = function(){
      menuToggle.classList.toggle('active')
      sidebar.classList.toggle('active')
    }

    function activeLink() {
      Menulist.forEach((item) =>
        item.classList.remove('active')
      )
      this.classList.add('active')
    }

    Menulist.forEach((item) =>
      item.addEventListener('click', activeLink)
    )
  </script>

  k
  </script>
  <script>
  const modal = document.getElementById('myModal');
  const setMonitorLink = document.querySelector('.sidebar li.active');

  modal.addEventListener('hidden.bs.modal', function () {
    setMonitorLink.classList.remove('active');
    const pedestrianImportLink = document.querySelector('.sidebar li a[data-target="#myModal"]');
    pedestrianImportLink.parentElement.classList.add('active');
  });


      var nums={{nums|safe}};
      var tabletrs=document.querySelectorAll('#vedioTableBody tr');
      for(var i=0; i< nums;i++){
         var td=tabletrs[i].children[3];
         td.innerHTML='<button class="btn btn-info">详情</button>';
         var but=td.children[0];
         but.setAttribute('data-toggle', 'modal');
         but.setAttribute('data-target', '#videoModal');

         but.onclick=function(){
  <!--            var videoSrc=document.getElementById('videoSrc');-->
              var videoSrc=document.getElementById('videos');
              var src=this.parentNode.parentNode.children[1].innerHTML;
              var rsrc="/media/videos/"+src;
              console.log(rsrc);
              console.log(typeof rsrc);

              videoSrc.setAttribute("src",rsrc);
         }
      }




      function mySubmit(formId){
          var form=document.getElementById(formId);
          form.submit();
      }


      let fileInput = document.getElementById('file');
      let info = document.getElementById('info');
      let preview = document.getElementById('image-preview');
      // 监听change事件:
      fileInput.addEventListener('change', function () {
          // 清除背景图片:
          preview.style.backgroundImage = '';
          if (!fileInput.value) {
              info.innerHTML = '没有选择文件';
              return;
          }
          let file = fileInput.files[0];
          let size = file.size;
          if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
              alert('不是有效的图片文件!');
              return;
          }
          // 读取文件:
          let reader = new FileReader();
          reader.onload = function (e) {
              let data = e.target.result;
              console.log(preview, 'a标签')
              preview.src = data
          };
          // 以DataURL的形式读取文件:
          reader.readAsDataURL(file);
      });



      $('.form_datetime').datetimepicker({
          format: 'yyyy-mm-dd hh:ii:ss',
          autoclose: true,
          /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
          language: 'zh-CN',
          dateFormat: 'yyyy-mm-dd',//日期显示格式
          timeFormat: 'HH:mm:ss',//时间显示格式
          todayBtn: 1,
          autoclose: 1,
          minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
          minuteStep: 1//分钟间隔1分钟
      });





      $(document).ready(function () {
          var trigger = $('.hamburger'),
              overlay = $('.overlay'),
              isClosed = false;
          trigger.click(function () {
              hamburger_cross();
          });
          function hamburger_cross() {
              if (isClosed == true) {
                  overlay.hide();
                  trigger.removeClass('is-open');
                  trigger.addClass('is-closed');
                  isClosed = false;
              } else {
                  overlay.show();
                  trigger.removeClass('is-closed');
                  trigger.addClass('is-open');
                  isClosed = true;
              }
          }
          $('[data-toggle="offcanvas"]').click(function () {
              $('#wrapper').toggleClass('toggled');
          });
      });






      //查询功能
  <!--    var btn = document.getElementById('query-btn')-->
  <!--    btn.onclick = function () {-->
  <!--        queryTable();-->
  <!--    }-->
  <!--    function queryTable() {-->
  <!--        // startTime,endTime-->
  <!--        startTime = document.getElementById('startTime').value;-->
  <!--        endTime = document.getElementById('endTime').value;-->
  <!--        if (!startTime || !endTime) {-->
  <!--            return-->
  <!--        }-->
  <!--        var startDate = new Date(startTime);-->
  <!--        var endDate = new Date(endTime);-->
  <!--        trs = document.querySelectorAll('.recBody tr');-->
  <!--        console.log(trs);-->
  <!--        for (var i = 0; i < trs.length; i++) {-->
  <!--            var recDate = new Date(trs[i].getElementsByTagName("td")[1].innerHTML);-->


  <!--            if (startDate <= recDate && recDate <= endDate) {-->
  <!--                trs[i].style.display = '';-->
  <!--            } else {-->
  <!--                trs[i].style.display = 'none';-->
  <!--            }-->
  <!--        }-->
  <!--    }-->

  </script>
<script src="js/script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script>
    const menuToggle = document.querySelector('.menuToggle'),
          sidebar = document.querySelector('.sidebar'),
          Menulist = document.querySelectorAll('.menu-list li')
    menuToggle.onclick = function(){
      menuToggle.classList.toggle('active')
      sidebar.classList.toggle('active')
    }

    function activeLink() {
      Menulist.forEach((item) =>
        item.classList.remove('active')
      )
      this.classList.add('active')
    }

    Menulist.forEach((item) =>
      item.addEventListener('click', activeLink)
    )
	</script>



 <script>
   const modal = document.getElementById('myModal');
   const invasionLink = document.querySelector('.menu-list li a[href="#record"]');
   const monitoringLink = document.querySelector('.menu-list li a[href="#gly-rt-monitor"]');
   const pedestrianImportLink = document.querySelector('.menu-list li a[href="#person-import"]');
   const infoManagerLink = document.querySelector('.menu-list li a[href="#info-manager"]');
   const setMonitorLink = document.querySelector('.menu-list li a[href="#set-monitor"]');
   const setvedioPageLink = document.querySelector('.menu-list li a[href="#vedioPage"]');

   modal.addEventListener('hidden.bs.modal', function () {
     invasionLink.parentElement.classList.add('active');
   });

   modal.querySelector('button[type="submit"]').addEventListener('click', function () {
     invasionLink.parentElement.classList.add('active');
   });
 </script>
<script src="/static/js/resize.js" type="text/javascript" charset="utf-8"></script>
<script>

<!--onclick="regionForm('摄像头1','form1')"-->

<!--var butt1=document.getElementById('butt1')-->
<!--butt1.onclick=function(){-->
<!--    regionForm('摄像头1','form1');-->
<!--}-->

    function regionForm(cameraId,formId){
         var form = document.getElementById(formId);
         var input =document.createElement('input');
         input.setAttribute('name','cameraId');
         input.setAttribute('value',cameraId);
         form.append(input);

         var odiv;
         var imageDiv;
        if(cameraId=='摄像头1'){
            imageDiv= document.getElementById('wrap1');
            odiv = document.getElementById('resizeBox1');
        }else if(cameraId=='摄像头2'){
            imageDiv= document.getElementById('wrap2');
            odiv = document.getElementById('resizeBox2');
        }else if(cameraId=='摄像头3'){
            imageDiv= document.getElementById('wrap3');
            odiv = document.getElementById('resizeBox3');
        }else if(cameraId=='摄像头4'){
            imageDiv= document.getElementById('wrap4');
            odiv = document.getElementById('resizeBox4');
        }

        console.log((odiv.getBoundingClientRect().x-imageDiv.getBoundingClientRect().x)/imageDiv.getBoundingClientRect().width);
        console.log((odiv.getBoundingClientRect().y-imageDiv.getBoundingClientRect().y)/imageDiv.getBoundingClientRect().height);
        console.log(odiv.getBoundingClientRect().width/imageDiv.getBoundingClientRect().width);
        console.log(odiv.getBoundingClientRect().height/imageDiv.getBoundingClientRect().height);


         var input_x =document.createElement('input');
         input_x.setAttribute('name','xRatio');
         input_x.setAttribute('value',(odiv.getBoundingClientRect().x-imageDiv.getBoundingClientRect().x)/imageDiv.getBoundingClientRect().width);
         form.append(input_x);

         var input_y =document.createElement('input');
         input_y.setAttribute('name','yRatio');
         input_y.setAttribute('value',(odiv.getBoundingClientRect().y-imageDiv.getBoundingClientRect().y)/imageDiv.getBoundingClientRect().height);
         form.append(input_y);

         var input_width =document.createElement('input');
         input_width.setAttribute('name','wRatio');
         input_width.setAttribute('value',odiv.getBoundingClientRect().width/imageDiv.getBoundingClientRect().width);
         form.append(input_width);

         var input_h =document.createElement('input');
         input_h.setAttribute('name','hRatio');
         input_h.setAttribute('value',odiv.getBoundingClientRect().height/imageDiv.getBoundingClientRect().height);
         form.append(input_h);
         form.submit();
    }

    function mySubmit(formId) {
        var form = document.getElementById(formId);
        form.submit();
    }


    let fileInput = document.getElementById('file');
    let info = document.getElementById('info');
    let preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function () {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = fileInput.files[0];
        let size = file.size;
        if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result;
            console.log(preview, 'a标签')
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });



    $('.form_datetime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        autoclose: true,
        /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        dateFormat: 'yyyy-mm-dd',//日期显示格式
        timeFormat: 'HH:mm:ss',//时间显示格式
        todayBtn: 1,
        autoclose: 1,
        minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
        minuteStep: 1//分钟间隔1分钟
    });





    $(document).ready(function () {
        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;
        trigger.click(function () {
            hamburger_cross();
        });
        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }
        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    });






    //查询功能
<!--    var btn = document.getElementById('query-btn')-->
<!--    btn.onclick = function () {-->
<!--        queryTable();-->
<!--    }-->
<!--    function queryTable() {-->
// <!--        // startTime,endTime-->
<!--        startTime = document.getElementById('startTime').value;-->
<!--        endTime = document.getElementById('endTime').value;-->
<!--        if (!startTime || !endTime) {-->
<!--            return-->
<!--        }-->
<!--        var startDate = new Date(startTime);-->
<!--        var endDate = new Date(endTime);-->
<!--        trs = document.querySelectorAll('.recBody tr');-->
<!--        console.log(trs);-->
<!--        for (var i = 0; i < trs.length; i++) {-->
<!--            var recDate = new Date(trs[i].getElementsByTagName("td")[1].innerHTML);-->


<!--            if (startDate <= recDate && recDate <= endDate) {-->
<!--                trs[i].style.display = '';-->
<!--            } else {-->
<!--                trs[i].style.display = 'none';-->
<!--            }-->
<!--        }-->
<!--    }-->




</script>


</body>
</html>